<template>
  <el-card 
    class="transaction-card" 
    shadow="hover"
    @click="handleCardClick"
  >
    <div class="card-content">
      <!-- 头部信息 -->
      <div class="card-header">
        <div class="transaction-id">
          {{ transaction.transactionId }}
        </div>
        <div class="data-source">
          <el-tag :type="getDataSourceType(transaction.dataSource)" size="small">
            {{ getDataSourceText(transaction.dataSource) }}
          </el-tag>
        </div>
      </div>
      
      <!-- 交易时间 -->
      <div class="transaction-time">
        <el-icon><Clock /></el-icon>
        {{ formatDate(transaction.transactionDate) }} {{ formatTime(transaction.transactionTime) }}
      </div>
      
      <!-- 付款方信息 -->
      <div class="payer-info">
        <div class="payer-name">{{ transaction.payerName }}</div>
        <div class="payer-account" v-if="transaction.payerAccount">
          {{ maskAccount(transaction.payerAccount) }}
        </div>
      </div>
      
      <!-- 交易金额 -->
      <div class="amount-section">
        <span 
          class="amount" 
          :class="{ 'income': transaction.amount > 0, 'expense': transaction.amount < 0 }"
        >
          {{ formatCurrency(transaction.amount) }}
        </span>
        <div 
          v-if="transaction.balance" 
          class="balance"
          :title="`交易后余额: ${formatCurrency(transaction.balance)}`"
        >
          余额: {{ formatCurrency(transaction.balance) }}
        </div>
      </div>
      
      <!-- 状态信息 -->
      <div class="status-section">
        <div class="status-item">
          <span class="status-label">匹配:</span>
          <el-tag :type="getMatchStatusType(transaction.matchStatus)" size="small">
            {{ getMatchStatusText(transaction.matchStatus) }}
          </el-tag>
        </div>
        <div class="status-item">
          <span class="status-label">过滤:</span>
          <el-tag :type="transaction.isFiltered ? 'warning' : 'success'" size="small">
            {{ transaction.isFiltered ? '已过滤' : '正常' }}
          </el-tag>
        </div>
      </div>
      
      <!-- 备注 -->
      <div class="remark-section" v-if="transaction.remark">
        <el-tooltip :content="transaction.remark" placement="top">
          <div class="remark-text">
            <el-icon><InfoFilled /></el-icon>
            {{ truncateText(transaction.remark, 30) }}
          </div>
        </el-tooltip>
      </div>
      
      <!-- 操作按钮 -->
      <div class="card-actions">
        <el-button 
          type="primary" 
          link 
          size="small" 
          @click.stop="handleMatchStatusClick"
        >
          {{ transaction.matchedOrder ? '查看匹配' : '手动匹配' }}
        </el-button>
        <el-button 
          type="success" 
          link 
          size="small" 
          @click.stop="handleManualMatch"
          v-if="!transaction.isFiltered && !transaction.matchedOrder"
        >
          手动匹配
        </el-button>
        <el-button 
          type="warning" 
          link 
          size="small" 
          @click.stop="handleEdit"
        >
          编辑
        </el-button>
        <el-dropdown 
          @command="handleMoreAction" 
          @click.stop
        >
          <el-button type="info" link size="small">
            更多<el-icon><More /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="filter" v-if="!transaction.isFiltered">
                标记过滤
              </el-dropdown-item>
              <el-dropdown-item command="unfilter" v-else>
                取消过滤
              </el-dropdown-item>
              <el-dropdown-item command="duplicate">
                标记重复
              </el-dropdown-item>
              <el-dropdown-item command="export">
                导出
              </el-dropdown-item>
              <el-dropdown-item command="delete" divided>
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Clock, InfoFilled, More } from '@element-plus/icons-vue'

interface Props {
  transaction: any
  getDataSourceType: (dataSource: string) => string
  getDataSourceText: (dataSource: string) => string
  getMatchStatusType: (status: string) => string
  getMatchStatusText: (status: string) => string
  formatCurrency: (amount: number) => string
  formatDate: (date: string) => string
  truncateText: (text: string, maxLength: number) => string
  icons: any
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'card-click', transaction: any): void
  (e: 'match-status-click', transaction: any): void
  (e: 'manual-match', transaction: any): void
  (e: 'edit', transaction: any): void
  (e: 'more-action', command: string, transaction: any): void
}>()

const handleCardClick = () => {
  emit('card-click', props.transaction)
}

const handleMatchStatusClick = () => {
  emit('match-status-click', props.transaction)
}

const handleManualMatch = () => {
  emit('manual-match', props.transaction)
}

const handleEdit = () => {
  emit('edit', props.transaction)
}

const handleMoreAction = (command: string) => {
  emit('more-action', command, props.transaction)
}

// 工具函数（如果未提供则使用默认实现）
const maskAccount = (account: string) => {
  if (account.length <= 8) return account
  return account.substring(0, 4) + '****' + account.substring(account.length - 4)
}

const formatTime = (time: string) => {
  if (!time) return '';
  const timeObj = new Date(time);
  if (isNaN(timeObj.getTime())) return '无效时间';
  return timeObj.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}
</script>

<style scoped lang="scss">
.transaction-card {
  cursor: pointer;
  
  .card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .transaction-id {
        font-family: 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        color: #606266;
        font-weight: 500;
      }
    }
    
    .transaction-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #909399;
      
      .el-icon {
        font-size: 12px;
      }
    }
    
    .payer-info {
      .payer-name {
        font-weight: 500;
        margin-bottom: 4px;
      }
      
      .payer-account {
        font-size: 12px;
        color: #909399;
      }
    }
    
    .amount-section {
      .amount {
        font-size: 16px;
        font-weight: 600;
        
        &.income {
          color: #52c41a;
        }
        
        &.expense {
          color: #f5222d;
        }
      }
      
      .balance {
        font-size: 12px;
        color: #909399;
        margin-top: 4px;
      }
    }
    
    .status-section {
      display: flex;
      gap: 12px;
      
      .status-item {
        display: flex;
        align-items: center;
        gap: 4px;
        
        .status-label {
          font-size: 12px;
          color: #606266;
        }
      }
    }
    
    .remark-section {
      .remark-text {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #909399;
        
        .el-icon {
          font-size: 12px;
        }
      }
    }
    
    .card-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;
    }
  }
}
</style>